<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport"
	content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="/common/css/monitor/index_server_info.css" rel="stylesheet" />
</head>
<style type="text/css">
#div1{
display:inline-block;
        width: 55px;
        height: 25px;
        border-radius: 50px;
        position: absolute;
        left: 80px;
    	top: -5px;
    }
    #div2{
        width: 22px;
        height: 21px;
        border-radius: 48px;
        position: absolute;
        background: white;
        box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    }
    .open1{
        background: rgba(0,184,0,0.8);
    }
    .open2{
        top: 2px;
        right: 1px;
    }
    .close1{
        background: rgba(255,255,255,0.4);
        border:3px solid rgba(0,0,0,0.15);
        border-left: transparent;
    }
    .close2{
        left: 0px;
        top: -2px;
        border:2px solid rgba(0,0,0,0.1);
    }
    /*预警通知*/
    .small-chat-box{
	    width: 400px;
	    height: auto;
    }
    .no-borders span{
    	color: black;
    }
    .no-borders .ruleWarning{
	    width: 63%;
	    float: right;
    }
    .ruleWarning label{
	    color:red;
	    padding-left: 5px;
    }
    #warningTable label:hover{
    	cursor: pointer;
    	text-decoration: underline;
    }
    .lookSoft{
    	font-size: 18px;
    	color:#669AD5;
    }
    .lookSoft:hover{
    	cursor: pointer;
    	text-decoration: underline;
    }
</style>

<body style="background-color: #f3f3f4;">
	<div>
		<div id="server_list">
			<!-- Row开始Start -->
			<div class="row">
				<div class="auto_center">
					<!-- 搜索条件Start -->
					<div class="seach">
						<button class="seach_where active" value="1H">1小时</button>
						<button class="seach_where" value="3H">3小时</button>
						<button class="seach_where" value="4H">4小时</button>
						<button class="seach_where" value="12H">12小时</button>
						<button class="seach_where" value="24H">1天</button>
						<button class="seach_where" value="3D">3天</button>
						<button class="seach_where" value="7D">7天</button>
						<button class="seach_where" value="14D">14天</button>
					<div class="pulsh" style="width: 30%;position: relative;display: inline-block;">
						<span style="display: inline-block;padding-left: 17px;">自动刷新:</span>
						<div id="div1" class="close1">
					        <div id="div2" class="close2"></div>
					    </div>
					</div>
						<label class="lookSoft">查看软件信息</label>
					</div>
					<!-- 搜索条件End -->
				<div id="appendUsage">
					
				</div>
				<div id="warningConfigList" class="small-chat-box fadeInRight animated">
					<table id="warningTable" class="table table-stripped small m-t-md">
					</table>
		    	</div>
				<div id="small-chat">
			        <span class="badge badge-warning pull-right" id="chatCount"></span>
			        <a class="open-small-chat">
			            <i class="fa fa-warning"></i>
			        </a>
			    </div>
				</div>
			</div>
			<!-- row结束End -->
		</div>
	</div>
	<!-- End Panel Other -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/common/petecat.js"></script>
	<script src="/common/form.js"></script>	
	<!-- HTML之间的传值 -->
	<script src="/js/jquery.params.js"></script>
	<script src="/js/plugins/layer-pc/layer.js"></script>
	<script src="/js/jquery.cookie.js"></script>
	<!-- 组件通用 -->
	<script src="/common/frame.js"></script>
	<!-- 图表 -->
	<script src="/js/plugins/flot/jquery.flot.js"></script>
	<script src="/js/plugins/flot/jquery.flot.resize.js"></script>
	<script src="/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
	<script src="/js/plugins/flot/jquery.flot.pie.js"></script>
	<!-- eCharts图表 -->
	<script src="/js/plugins/echarts/echarts-all.js"></script>
	<script type="text/javascript">
	 var serverMac = GetQueryString("serverMac");
	 var proToken = GetQueryString("proToken");
	 var projectId = GetQueryString("projectId");
	 var autoRefresh = false;
	//默认类型小时
	var type = "H";
	//默认展示最近一个小时 
	initOneHouresTimeOut();
		$(function() {
			//查看软件信息
			$(".lookSoft").click(function(){
			serverSoft = layer.open({
			                type: 2,
			                title: "查看软件信息",
			                shade: 0.8,
			                area: ['630px', '80%'],
			                content: ['/monitor/software/server_software.html?proToken='+proToken+'&serverMac='+serverMac, 'auto'],
			                end:function(){
			                }
			            });
				layer.full(serverSoft);
			});
			
			//点击预警通知
			$("#small-chat").click(function(){
				var i = $(this).find("i");
				if(i.hasClass("fa-warning")){
					i.removeClass("fa-warning");
					i.addClass("fa-remove");
					$("#warningConfigList").addClass("active");
				}else{
					i.removeClass("fa-remove");
					i.addClass("fa-warning");
					$("#warningConfigList").removeClass("active");
				}
			});
			
			$("#warningTable").on("click","label",function(){
				var title = $(this).text();
				var ruleId = $(this).attr("ruleId");
				layer.open({
	                type: 2,
	                title: "预警 -- "+title,
	                shade: 0.8,
	                area: ['630px', '80%'],
	                content: ['/monitor/warning_notice_index.html?ruleId='+ruleId, 'auto'],
	                end:function(){
	                	//初始化预警信息
	            		initWarningNotice();
	                }
	            });
			});
			
			//自动刷新开关键
			$("#div2").click(function(){
				var class1Name = $("#div1").prop("className");
				var class2Name = $(this).prop("className");
				class1Name = (class1Name=="close1")?"open1":"close1";
				class2Name = (class2Name=="close2")?"open2":"close2";
				$("#div1").attr('class',class1Name);
				$(this).attr('class',class2Name);
				autoRefresh = autoRefresh == true?false:true;
				//开启自动刷新
				openInterval(autoRefresh);
			});
			//初始化页面报表
			$("button").click(function(){
				$("#appendUsage").html("");
				$(this).siblings().removeClass("active")
				$(this).addClass("active");
				var time = $(this).val();
				var seachTime = parseFloat(time);
				type = time.charAt(time.length - 1) ;
				if(type=="H"){
					time = (60*60)*seachTime;
				}else if(type=="D"){
					time = (60*60)*24*seachTime;
				}
				newTime = new Date().getTime().toString();
				newTime = newTime.substr(0,10);
				var finalTime = (newTime - time).toString();
				finalTime = finalTime.substr(0,10);
				initEchartsInPage(finalTime,newTime,type,projectId);
			});
			
		});
		function openInterval(autoRefresh){
			if(autoRefresh){
				refID = setInterval(initOneHouresTimeOut,interTime*1000); 
			}else{
				clearInterval(refID);
			}
		}
		
		
		
		//初始化展示一个小时图表，然后按照间隔刷新页面  
		function initOneHouresTimeOut(){
			$("#appendUsage").html("");
			var newTime = (new Date().getTime()).toString();
			newTime = newTime.substr(0,10);
			var oldTime=(newTime - 60*60).toString();
			oldTime = oldTime.substr(0,10);
			initEchartsInPage(oldTime,newTime,type,projectId);
		}
		
		
		
		//初始化页面报表
		function initEchartsInPage(time,newTime,type,projectId){
			//加载服务器数据
			var req = {};
			var fushData = {"token":proToken,"serverMac":serverMac,"newTime":newTime,"time":time,"type":type,"projectId":projectId};
        	req['reqJSON'] = {
    			type : 'get',
    			url : BASE_URL+'/base/project/queryServerPercent',
    			data:fushData
        	};
        	req['successFn'] = function(respData){
        		if(respData.data.length > 0){
        			$.each(respData.data,function(index,item){
            			//拼接字符串
            			appendUsing(item,index);
            			if(item.serverDisk){
            				var html = lineTypes(item.serverDisk);
            				html=html.substring(0,html.length-1);
            				html = "["+html+"]";
            				var items = {
                					id:"usage"+index,
                					xData:item.xshaftData,
                					yData:html,
                					xName:item.title,
                					subtext:item.intervalTime
                			};
            				initTowEcharts(items);
            			}else{
            				var items = {
                					id:"usage"+index,
                					xData:item.xshaftData,
                					yData:item.yshaftData,
                					xName:item.title,
                					subtext:item.intervalTime
                			};
            				//初始化echarts折线图
                			initEcharts(items);
            			}
            			
            		});
        		}else{
        			$("#appendUsage").html("<h1>没有要展示的信息！</h1>");
        		}
        		//初始化预警信息
        		initWarningNotice()
        	};
        	ajaxRequest(req);
		}
		//初始化预警信息
		function initWarningNotice(){
			$.ajax({
    			type:'get',
    			url:BASE_URL+"/base/warningconfig/queryEsWarningNotice",
    			beforeSend:function(request){
    				request.setRequestHeader("Authorization","Bearer "+getSessionData("userToken"));
    			},
    			success:function(resultData){
    				if(resultData.data.length > 0){
    					if(resultData.code == SUCCESS_CODE){
    						$("#warningTable").html("");
        					//拼接预警提示信息
                    		var html = appendWarningNotice(resultData.data);
        					$("#warningTable").append(html);
        				}else{
        					layer.alert("预警信息获取失败",{title:"获取失败",icon:3});
        				}
    				}else{
    					//当前没有预警消息
    					$("#warningTable").html("<h2 style='color:#1ab394;'>恭喜，当前没有预警通知消息！</h2>");
    				}
    				
    			}
    		});
		}
		
		//拼接预警规则名称提示
		function appendWarningNotice(dataList){
			var html = "";
			var totolCount = 0;
			$.each(dataList,function(index,item){
				totolCount += item.configCount;
				html += '<tr>'+
				'								<td class="no-borders">'+
				'									<i class="fa fa-circle text-danger"></i>'+
				'								</td>'+
				'								<td class="no-borders">'+
				'									<span>'+item.configName+'（'+item.configCount+'）：</span>'+
				'									<div class="ruleWarning">'+
				appendRemarkNotice(item)
				'									</div>'+
				'								</td>'+
				'							</tr>';
			});
			$("#chatCount").text(totolCount);
			return html;
		}
		
		//拼接预警备注信息
		function appendRemarkNotice(item){
			var htm = "";
			$.each(item.remarkVOList,function(index,ite){
				for(var i =0;i<ite.remarkCountList.length;i++){
					htm += '<label ruleId='+ite.ruleIdList[i]+'>'+ite.remarkList[i]+'('+ite.remarkCountList[i]+')</label>';
				}
			});
			return htm;
		}
		
		//拼接图表
		function appendUsing(item,index){
			interTime = item['intervalTime'];
			var html = '<div class="col-sm-6">'+
						'						<div class="ibox" style="height: 300px;">'+
						'							<div class="ibox-content" style="height: 100%;">'+
						'								<div class="flot-chart"  style="height: 100%;">'+
						'									<div class="flot-chart-content" id="usage'+index+'"></div>'+
						'								</div>'+
						'							</div>'+
						'						</div>'+
						'					</div>';
			$("#appendUsage").append(html);
		}
		
		function lineTypes(list){
			var html = "";
			$.each(list,function(index,item){
				html += '{name : "'+item['diskName'].substring(0,1)+'",type : "line",data : ['+item['diskSize']+']},';
			});
			return html;
		}
	</script>

</body>
</html>